//放大镜
function fdj() {

	class Magnifier {
		constructor(smallBox, bigBox, mask) {
			this.smallBox = smallBox;
			this.bigBox = bigBox;
			this.mask = mask;
		}
		mouseover() {
			let that = this;
			this.smallBox.onmouseover = function() {
				that.mask.style.display = "block";
				that.bigBox.style.display = "block";
				$("#info").css('visibility', 'hidden');
			}
		}
		mouseout() {
			let that = this;
			this.smallBox.onmouseout = function() {
				that.mask.style.display = "none";
				that.bigBox.style.display = "none";
				$("#info").css('visibility', 'visible');
			}
		}
		mousemove() {
			let that = this;
			this.smallBox.onmousemove = function(evt) {
				let e = evt || event;
				let left = e.pageX - this.offsetLeft - that.mask.offsetWidth / 2;
				let top = e.pageY - this.offsetTop - that.mask.offsetWidth / 2;
				if (left < 0) {
					left = 0;
				}
				let maxLeft = this.offsetWidth - that.mask.offsetWidth;
				if (left > maxLeft) {
					left = maxLeft;
				}
				if (top < 0) {
					top = 0;
				}
				let maxTop = this.offsetHeight - that.mask.offsetHeight;
				if (top > maxTop) {
					top = maxTop;
				}
				// 小图片:大图片=小窗口:大窗口（x）
				let x = that.bigBox.offsetWidth * left / that.mask.offsetWidth;
				let y = that.bigBox.offsetHeight * top / that.mask.offsetHeight;
				that.mask.style.left = left + "px";
				that.mask.style.top = top + "px";
				that.bigBox.style.backgroundPositionX = -x + "px";
				that.bigBox.style.backgroundPositionY = -y + "px";
				
				
			}

		}

		eventBind() {
			this.mouseover();
			this.mouseout();
			this.mousemove();

		}
	}
	let oSmallBox = document.getElementById("product-img");
	let oBigBox = document.getElementById("big-box");
	let oMask = document.querySelector("#mask");
	let m = new Magnifier(oSmallBox, oBigBox, oMask)
	m.eventBind();
	}

//商品
	function getproduct(){
		let goodsId=location.search.split("=")[1];
		
		$.get("php/getGoodsInfo.php?goodsId="+goodsId,function(data){
			console.log("data",data);
			let goods=JSON.parse(data);
			console.log("goods",goods);
			let htmlStr=`
		<div id="product-img">
		<img src="${goods.goodsImg}">
		<div id="mask">
			
		</div>
		<div id="big-box" style="background-image: url('${goods.goodsImg}')">
			
		</div>
	</div>
	<div id="info">
		<div id="hd">
			<h1>${goods.beiyong1}</h1>
			<a href=""></a>
		</div>
		<div id="money">
			<p class="price">
				<span class="rmb">¥</span>
				<span class="num" id="price">${goods.goodsPrice}</span>
			</p>
	
			<div class="clearfix">
				<a href="#" class="buynow" onclick="addproduct()">立即购买</a>
				<a href="#" class="addcart">添加至购物车</a>
			</div>
		</div>
		<div id="clearfix">
			<a href="#" class="tailor">定制服务</a>
			<a href="#" class="lettering">刻字服务</a>
		</div>
		<div id="share">
			<span class="label">分享至：</span>
			<a href="#" class="bds_sqq"  title="分享到QQ好友"></a>
			<a href="#" class="bds_qzone"  title="分享到QQ空间"></a>
			<a href="#" class="bds_weixin" title="分享到微信"></a>
			<a href="#" class="bds_tsina"  title="分享到新浪微博"></a>
	
		</div>
	</div>
	`;
	$("#product-top").html(htmlStr);
	fdj()
		})
	}
	
	// 添加到购物车
	function addproduct(){
		let vipname= getCookie("user");
		let goodsId=location.search.split("=")[1];
		console.log( goodsId)
		$.post("php/addShoppingCart.php",{
			"vipName":vipname,
			"goodsId":goodsId,
			"goodsCount":1
		})
	}
	
	
	$(function(){
		getproduct();
	})

	